<template>
  <div class="menuX">
    <el-menu ref="menuDom" @open="props.openFn" :default-active="props.active"
               :ellipsis="props.ellipsis" v-bind="$attrs" :popper-offset="props.popperOffset"
               :unique-opened="props.onlyOne" :mode="props.horizontal?'horizontal':undefined"
               :collapse="props.collapse" class="el-menu-vertical-demo" collapse-transition>
        <menu-x-item-one :clickFn="props.clickFn" :props="propsD" :data="props.data"
                         :openFn="props.openFn" :showBeforeFn="props.showBeforeFn"
                         :collapse="props.collapse" :popper-class="props.popperClass">
          <template #title="{data}">
            <slot name="title" :data="data"/>
          </template>
          <template #icon="{data}">
            <slot name="icon" :data="data"/>
          </template>
        </menu-x-item-one>
      </el-menu>
  </div>

</template>

<script setup>
import menuXItemOne from './xhykMenuItem.vue'
import {computed, ref} from 'vue'
import { ElMenu } from 'element-plus'

const props = defineProps({
  // 菜单列表
  data: {
    type: Object,
    default: []
  },
  // 菜单对应属性
  props: {
    type: Object,
    default: {
      index: 'id', // 唯一标识
      title: 'name', // 菜单title
      icon: '', // 菜单title
      children: 'children' // 子菜单字段
    }
  },

  // 菜单类型
  horizontal: {
    type: Boolean,
    default: false
  },

  // 点击了子菜单项的回调事件
  clickFn: {
    type: Function,
    default: function (item) {
      // console.log(item)
    }
  },
  // 显示菜单前回调函数
  showBeforeFn: {
    type: Function,
    default: item => {
      // console.log(item)
      return true
    }
  },
  // 菜单打开回调函数
  openFn: {
    type: Function,
    default: index => {
      // console.log(index)
    }
  },
  // 默认激活的菜单
  active: {
    type: String,
    default: ''
  },

  // 折叠
  collapse: {
    type: Boolean,
    default: false
  },

  // 撑开宽度
  openWidth: {
    type: [Number, String],
    default: 'auto'
  },
  // 只能打开一个
  onlyOne: {
    type: Boolean,
    default: false
  },

  // 是否进行省略
  ellipsis: {
    type: Boolean,
    default: false
  },

  // 弹窗的类名
  popperClass: {
    type: String,
    default: 'xhMenu'
  },

  popperOffset: {
    type: Number,
    default: 14
  },
})

// 设置菜单撑开的宽度
const openWidthD = computed(() => {
  if (typeof props.openWidth == "string") {
    const tempW = props.openWidth;
    if (tempW.includes("%") || tempW.includes("vw") ||
        tempW.includes("auto") || tempW.includes("px") || tempW.includes("rpx")) {
      return tempW;
    } else {
      return `${tempW}px`;
    }
  } else {
    return `${props.openWidth}px`
  }
})

// 设置默认的字段
const propsD = computed(() => {
  return {
    index: props.props.index || 'id',
    title: props.props.title || 'title',
    icon: props.props.icon || '',
    children: props.props.children || 'children'
  }
})


// 给外部使用的函数
const menuDom = ref({})

// 打开菜单
const open = (index) => {
  menuDom.value.open(index)
}

// 关闭菜单
const close = index => {
  menuDom.value.close(index)
}

defineExpose({
  open,
  close
})
</script>

<style scoped lang='scss'>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: v-bind(openWidthD);
  min-width: v-bind(openWidthD);
}


:deep(.menuX) {
  width: 100%;

  .el-menu {
    // 去掉右边外边框，由父组件设置外边框
    //width: 100%;
    border: none;
  }

  // 选中的菜单项
  //.is-active {
  //  color: var(--menuActiveC) !important;
  //  background-color: var(--menuActiveB) !important;
  //
  //  .title {
  //    font-size: var(--fontS) !important;
  //  }
  //}
}

// region 收起来时，去掉展开箭头
:deep(.el-menu--collapse) {
  .el-sub-menu__title {
    .el-sub-menu__icon-arrow {
      display: none;
    }
  }
}
// endregion

// region 图标居中
:deep(.el-menu-tooltip__trigger){
  //display: flex;
  //justify-content: center;
}

:deep(.el-tooltip__trigger){
  //display: flex;
  //justify-content: center;
}
// endregion
</style>